<template>
  <div>

    <van-tabbar class="tabbar" v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/topic">专题</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/type">分类</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  components: {},
  computed: {
    /* 
        方法名(){

        }
    */
    // 解决tabbar刷新后，图标变成首页，但页面还留在图标页
    // 设置一个自定义属性
    active: {
      // 获取值
      get() {
        // 这个num取的路由里的num，这样保证上面的active是一直变化的，图标会留在当前页面
        return this.$route.meta.num;
      },
      // 设置值
      set() {}
    }
  }
};
</script>


<style lang='less'  >
.van-tabbar--fixed{
  bottom:-0.1333rem
}
</style>
